<script setup lang="ts">
import HeaderView from '../components/HeaderView.vue'
import FooterView from '../components/FooterView.vue'

</script>

<template>

  <HeaderView  :topId="top.id" />

  <div class="container-containerb">
    <div class="navigation">
      <h2>{{ top.title }}</h2>
      <div class="nav">
        <router-link :to="'/lists/'+top.id" :class="top.id==cate_id ? 'on' : ''" >All</router-link>
        <!-- 循环栏目 -->
        <router-link :to="'/lists/' + item.id"  v-for="item in top_child" :key="item.id" :class="item.id==cate_id ? 'on' : ''">
          {{item.title}}
        </router-link>
      </div>
    </div>

    <div class="proalista">



       <div class="list"  v-for="item in lists" :key="item.id" >
      <router-link :to="'/Details/'+item.id">
          <el-image :src="item.pic" fit="fill" />
          <div class="prices">$<span>{{ item.price }}</span><i>$299.99</i></div>
          <div class="title">{{ item.name }}</div>

      </router-link>
      </div>

    </div>

  </div>

  <FooterView class="footer" />

</template>

<script lang="ts">
import { useRoute } from 'vue-router'
import createAxios from '../utils/axios'

export default {
  data() {
    return {
      pageTitle: 'Little Rascal',
      lists: [],
      top_child: [],
      top: [],
      cate:{},
      cate_id:0
    };
  },
  created() {
    this.updateTitle();
    this.fetchLists(this.$route.params.id)
    //console.log(this.$route.params.id)
  },
  watch:{
      // 监听路由变化，处理参数更新
      '$route.params.id'(newId, oldId) {
        console.log(newId, oldId)
        this.fetchLists(newId)
      }
  },
  methods: {
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    },
    // 获取商品列表
    fetchLists(id){
      this.cate_id = id

      createAxios({
          url: '/frontend/goods/lists',
          method: 'post',
          data: {cate_id: id},
        },
        {
            showSuccessMessage: false,
        })
        .then((res) => {
            console.log('列表请求结果', res)
            this.lists = res.data.list
            this.top_child = res.data.top_child
            this.top = res.data.top
            this.cate = res.data.cate
        })
        .catch(() => {
        })
    }
  }

}
</script>

<style>

	.container-containerb {
    min-width: 1000px;
		padding: 0 5%;
    margin: 0 auto 0 auto;
    max-width: 1520px;
    
	}


 .proalista {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 20px;
  .list
   {
    display: inline-block;
    width: 18%;
    padding: 10px 0;
    margin: 1%;

    a {
      width: 100%;
      .el-image {
        display: block;
      }
      img {
        height: 250px;
        width: 100%;
      }
      .prices {
        font-size: 16px;
        padding: 0 2px 0 2px;

          color: #fd384f;
          font-weight: 600;
          span {
            font-size: 22px;
          }
          i {
            font-style: normal;
            font-weight: 500;
            color: #a5a5a5;
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 4px;
          }

      }
      .sale {
        font-size: 12px;
        color: #a5a5a5;
      }

      .title {
        height: 40px;
        line-height: 20px;
        font-weight: 700;
        width: 100%;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}


.container-containerb {
  margin-top: 170px;
  .navigation {
    display: flex;
    justify-content: flex-start;
    line-height: 30px;
    padding: 0 0 10px 0;
    h2 {
      padding-right: 30px;
    }
    .nav {
    font-size: 16px;
    a {
      display: inline-block;
      padding:0 20px;
      margin:0 30px 0 0;
      background-color: #fafafa;
      border: 1px solid #fafafa;
      white-space:nowrap;
    }
    a.on {
      border: 1px solid #333;
      background-color: #ffffff;
      color: #333;
    }
    a:hover {
      border: 1px solid #333;
      color: #333;
    }
  }
  }
  .container-container-wrap {
    padding-bottom: 60px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: -1%;margin-right: -1%;
    a {
      display: inline-block;
      padding: 30px 0;
      width: calc( 23% - 2px );
      padding: 0;
      margin: 1%;
      border: 1px solid #f9f9f9;
      .picbg {
        background-color: #ffffff;
      }
      img {
        width: 100%;
      }
      h3 {
        line-height: 40px;
        padding: 8px 5% 0 5%;
        font-size: 26px;
        background-image: linear-gradient(to right, #f41cb2, #f25511) !important;
        -webkit-background-clip: text !important;
        color: transparent !important;
      }
      p {
        font-size: 14px;
        line-height: 24px;
        padding:0 5% 0 5%;
        margin-bottom: 20px;
         overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
      }
    }
    a:hover {
      -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
      box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
      background-color: #fff;
    }
  }

}
@media only screen and (max-width: 1000px) {


  .container-containerb {
    max-width: 90%;
    min-width: 90%;
    width: 90%;
    padding: 0;
    margin-top: 80px !important;
    .navigation {
      padding: 0;
      display:block;
      h2 {
        padding: 12px 0;
        font-size: 18px;
      }
      .nav {
        display: flex;
        position: relative;
        overflow-x: auto;
        a {
          margin: 0 14px 0 0;
          padding: 6px 12px;
        }
      }
      .nav::-webkit-scrollbar {
        display: none;
      }
    }

       .proalista {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

  .list
   {
    display: inline-block;
    width: 47%;
    padding: 10px 0 2px 0;
    margin-right: 3%;
    margin-left: 0;

    a {
      width: 100%;
      .el-image {
        display: block;
      }
      img {
        height: 160px;
        width: 100%;
      }
      .prices {
        font-size: 16px;
        padding: 0 2px 0 2px;

          color: #fd384f;
          font-weight: 600;
          span {
            font-size: 22px;
          }
          i {
            font-style: normal;
            font-weight: 500;
            color: #a5a5a5;
            text-decoration: line-through;
            font-size: 12px;
            margin-left: 4px;
          }

      }
      .sale {
        font-size: 12px;
        color: #a5a5a5;
      }

      .title {
        height: 40px;
        line-height: 20px;
        font-weight: 500;
        width: 100%;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
  .list:nth-child(2n)
  {
    margin-right: 0;
  }
}


  }
  .container-container-wrap {
    padding-top: 60px;
    padding-bottom: 20px !important;
    justify-content: space-between !important;
    a {
      width: 46% !important;
      margin: 10px 1% 20px 1% !important;
      .el-image {
        width: 100%;
        img {
          height: 100%;
        }
      }
       p {
            font-size: 14px !important;
            line-height: 24px;
            padding:0 5% 0 5%;
            margin-bottom: 20px;


          }

    }
    a:hover {
      -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)  !important;
      box-shadow:0 0 0 0 rgba(255, 255, 255, 0) !important;
    }
  }
  .footer {
    display: none;
  }
}
</style>
